<template>
	<view class="user-layout">
		<view class="content">
			<!-- <image class="bg" src="http://www.qixdian.cn/upload/20231012/65276ac0de922.png"></image> -->
			<view class="top" :style="{ paddingTop: top + 'px' }">
				<view class="top_item" @click="header(`/packageB/content/message`, 1, true)">
					<view class="top_item_num" v-if="userData.messageCount > 0">{{ userData.messageCount }}</view>
					<image class="top_item_icon" src="https://www.dingxians.cn/images/user/message.png"></image>
				</view>
				<view class="top_item" @click="header(`/pages/user/setting`, 1, true)">
					<image class="top_item_icon" src="https://www.dingxians.cn/images/user/setting.png"></image>
				</view>
			</view>

			<view class="header">
				<view class="user_box">
					<view class="user_box_left">
						<view class="avatar-box">
							<image :src="userData.avatar" class="user_avatar" v-if="loginSta"></image>
							<image @click="header(`/pages/user/wxlogin`)"
								src="https://www.dingxians.cn/upload/user_static/user/avatar.png" class="user_avatar"
								v-else></image>
						</view>
						<view class="user_info">
							<view class="username" v-if="loginSta">{{ userData.nickname }}</view>
							<view class="username" @click="header(`/pages/user/wxlogin`)" v-else>游客</view>
							<view class="user_id" v-if="loginSta">
								<view class="id">ID：{{ userData.id }}</view>
								<image @click="copyId(userData.id)" src="https://www.dingxians.cn/images/user/copy.png"
									class="edit_image"></image>
							</view>
							<view class="user_id" @click="header(`/pages/user/wxlogin`)" v-else>
								<view class="id">点击头像去登录</view>
							</view>
						</view>
					</view>
					<!-- <image
            @click="header('/pages/activity/sign')"
            class="user_box_right"
            v-if="token"
            src="https://www.dingxians.cn/upload/user_static/user/sign.png"
          ></image> -->
				</view>

				<view class="balance_box">
					<view class="balance_item" @click="header(`/pages/user/balance`, 1, true)">
						<view class="balance_value">{{ userData.balance }}</view>
						<view class="balance_text">虎元素</view>
					</view>
					<view class="balance_item" @click="header(`/pages/user/point_log`, 1, true)">
						<view class="balance_value">{{ userData.point }}</view>
						<view class="balance_text">虎币</view>
					</view>
					<!-- <view class="balance_item" @click="header(`/pages/user/coupon`, 1, true)">
            <view class="balance_value">{{ userData.coupon_count }}</view>
            <view class="balance_text">优惠券</view>
          </view> -->
					<!-- <view class="balance_item" @click="header(`/pages/user/back_card`, 1, true)">
            <view class="balance_value">{{ userData.back_card_count }}</view>
            <view class="balance_text">反悔卡</view>
          </view> -->
				</view>
			</view>

			<view class="vip_box" v-if="token">
				<view class="vip_top">
					<view class="vip_level">vip{{ userData.level_id }}</view>
					<image class="vip_btn" @click="header(`/pages/user/vip`, 1, true)"></image>
				</view>
				<view class="vip_middle">
					<liu-progressbar :bgColor="'#DED000'" :progress="userData.level_rate" dsColor="#080808"
						color="#FFFFFF" :height="'16rpx'" />
				</view>
				<view class="vip_bottom">
					<view>{{ userData.level_info }}</view>
					<view style="color: #d1d1d1">
						<span class="grow-value">{{ userData.grow_value }}</span>
						/{{ userData.total_pay }}
					</view>
				</view>
				<!-- <image class="vip_bg" src="https://www.dingxians.cn/images/user/vip_bg.png"></image> -->
			</view>

			<view class="order_box">
				<view class="order_header">
					<!-- <view class="order_header_left">我的订单</view> -->
					<view class="order_header_right" @click="header(`/pages/order/index`, 1, true)">
						<text>全部订单</text>
						<image src="https://www.dingxians.cn/images/user/arrow-right.png" class="right"></image>
					</view>
				</view>

				<view class="order_list">
					<!-- <view class="order_item" @click="header(item.url, 1, true)" v-for="item in orderData" :key="item.id">
            <image :src="item.image" class="order_icon"></image>
            <view class="order_num" v-if="item.num">{{ item.num }}</view>
            <view class="order_title">{{ item.title }}</view>
          </view> -->
					<view class="order_item" @click="header(item.url, 1, true)" v-for="item in orderData"
						:key="item.id">
						<image :src="item.image" class="order_icon"></image>
						<view class="order_num" v-if="item.num">{{ item.num }}</view>
						<view class="order_title">{{ item.title }}</view>
					</view>
				</view>
			</view>

			<!--  -->
			<view class="apps">
				<view class="apps_item" @click="skip(item)" v-for="item in appData2" :key="item.id">
					<!-- <view class="apps_title_box">
            <view class="apps_title">{{ item.title }}</view>
            <view class="apps_remark">{{ item.remark }}</view>
          </view> -->
					<image class="apps_icon" mode="widthFix" :src="item.image"></image>
				</view>
			</view>

			<view class="app_box">
				<!-- <view class="app_header">常用功能</view> -->
				<view class="app_content">
					<view class="app_item" @click="go_url(item, 1, true)" v-for="item in appData" :key="item.id">
						<image mode="heightFix" class="app_icon" :src="item.image"></image>
						<view class="app_title">{{ item.title }}</view>
					</view>
				</view>
			</view>

			<my-alert-dialog ref="alertDialog" :title="!userData.is_bind ? '请输入邀请码' : '已绑定'" @cancel="cancel"
				@confirm="bind">
				<view class="pop_box" v-if="!userData.is_bind">
					<!-- <view class="pop_header">请输入邀请码</view> -->
					<view class="pop_tip">绑定好友即可获得
						<text style="color: #ded000">5虎元素</text>
					</view>
					<input class="pop_code" v-model="codeParams.code" placeholder="请输入邀请码" />
					<!-- <view class="give_btn_group">
            <view class="give_btn give_cancel" @click="cancel()">取消</view>
            <view class="give_btn give_confirm" @click="bind()">确定</view>
          </view> -->
				</view>

				<view class="pop_box" v-else>
					<!-- <view class="pop_header">已绑定</view> -->
					<view class="pop_user_box">
						<image class="pop_user_avatar" :src="userData.parent.avatar"></image>
						<view class="pop_user">
							<view class="pop_user_nickname">昵称：{{ userData.parent.nickname }}</view>
							<view class="pop_user_id">ID：{{ userData.parent_id }}</view>
						</view>
					</view>
				</view>
			</my-alert-dialog>

			<!--  <uni-popup ref="popup" v-show="popStatus">
        <view class="pop_box" v-if="!userData.is_bind">
          <view class="pop_header">请输入邀请码</view>
          <view class="pop_tip">绑定好友即可获得5虎元素</view>
          <input class="pop_code" v-model="codeParams.code" placeholder="请输入邀请码" />
          <view class="give_btn_group">
            <view class="give_btn give_cancel" @click="cancel()">取消</view>
            <view class="give_btn give_confirm" @click="bind()">确定</view>
          </view>
        </view>

        <view class="pop_box" v-else>
          <view class="pop_header">已绑定</view>
          <view class="pop_user_box">
            <image class="pop_user_avatar" :src="userData.parent.avatar"></image>
            <view class="pop_user">
              <view class="pop_user_nickname">昵称：{{ userData.parent.nickname }}</view>
              <view class="pop_user_id">ID：{{ userData.parent_id }}</view>
            </view>
          </view>
        </view>
      </uni-popup> -->

			<uni-popup class="app_popup" v-show="showVersion" mode="center" ref="update_app" :mask-click="false">
				<view class="app_pop_box">
					<image class="pop_bg" mode="widthFix" src="http://www.qixdian.cn/upload/20230830/64eeb4f594a71.png">
					</image>
					<view class="pop_version">
						<view class="pop_header">发现新版本 {{ versionData.version_no }}</view>
						<text class="pop_content">{{ versionData.content }}</text>
					</view>
					<view class="rate" v-if="downStatus">
						<view class="rate_image">
							<liu-progressbar :bgColor="'#DED000'" :progress="percentVal" dsColor="#ccc" color="#FFFFFF"
								:height="'15rpx'" />
						</view>
						<view class="rate_value">{{ percentVal }}%</view>
					</view>
					<view class="down_btn_group" v-else>
						<!-- <view class="down_btn cancel" @click="cancel()">取消</view> -->
						<view class="down_btn down" @click="updateApp()">更新</view>
					</view>
				</view>
			</uni-popup>
			<!-- <view style="visibility: hidden;">1</view> -->
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<my-alert-dialog ref="kefuDialog" title="请截图扫码加客服微信" cancel-string="关闭" :showConfirm="false">
			<image :src="kferm" style="width: 300rpx; height: 300rpx; margin: 50rpx auto;"></image>
		</my-alert-dialog>
		<!-- #endif -->
	</view>
</template>

<script>
	import api from '../../api/index.js'

	export default {
		data() {
			return {
				kferm: '',
				orderData: [{
						id: 1,
						image: 'https://www.dingxians.cn/images/user/order-item-1.png',
						url: '/pages/order/index?status=1',
						title: '待付款',
						num: 0,
					},
					{
						id: 2,
						image: 'https://www.dingxians.cn/images/user/order-item-2.png',
						url: '/pages/order/index?status=2',
						title: '待发货',
						num: 0,
					},
					{
						id: 3,
						image: 'https://www.dingxians.cn/images/user/order-item-3.png',
						url: '/pages/order/index?status=3',
						title: '待收货',
						num: 0,
					},
					{
						id: 4,
						image: 'https://www.dingxians.cn/images/user/order-item-4.png',
						url: '/pages/order/index?status=4',
						title: '已完成',
						num: 0,
					},
				],
				userData: {
					id: '',
					nickname: '',
					avatar: 'https://www.dingxians.cn/upload/user_static/user/avatar.png',
					balance: 0,
					point: 0,
					level_id: 0,
					commission: 0,
					messageCount: 0,
					lower_standard: 0,
					five_total_pay: 0,
					level_info: '',
					ext_info: '',
					grow_value: 0,
					total_pay: 0,
					is_bind: true,
					coupon_count: 0,
					back_card_count: 0,
					parent: {},
				},
				appData: [{
						id: 1,
						image: 'https://www.dingxians.cn/images/user/address-item.png',
						url: '/pages/address/index',
						title: '地址管理'
					},
					{
						id: 2,
						image: 'https://www.dingxians.cn/images/user/yaoqing-item.png',
						url: '/pages/activity/invite',
						title: '邀请有礼'
					},
					{
						id: 3,
						image: 'https://www.dingxians.cn/images/user/gift-item.png',
						url: '/pages/user/giveList',
						title: '赠礼记录'
					},
					{
						id: 4,
						image: 'https://www.dingxians.cn/images/user/hezuo-item.png',
						url: '/packageB/content/cooperate',
						title: '商务合作'
					},
					{
						id: 5,
						image: 'https://www.dingxians.cn/images/user/question-item.png',
						url: '/packageB/content/question',
						title: '常见问题',
					},
					{
						id: 6,
						image: 'https://www.dingxians.cn/images/user/feedback-item.png',
						url: '/packageB/content/feedback',
						title: '意见反馈',
					},
					{
						id: 7,
						image: 'https://www.dingxians.cn/images/user/kefu-item.png',
						url: '/packageB/content/customer',
						title: '联系客服'
					},
					{
						id: 8,
						image: 'https://www.dingxians.cn/images/user/ic-open-box-history.png',
						url: '/pages/user/order',
						title: '开盒记录',
					},
				],
				appData2: [
					// {
					//id: 1,
					//image: 'https://www.dingxians.cn/upload/user_static/user/app-item-1.png',
					//url: '/pages/user/promotion',
					// title: '推广申请',
					//remark: '申请合伙人',
					//},
					{
						id: 2,
						image: 'https://www.dingxians.cn/upload/20250509/681da286bc15a.png',
						// url: '/pages/user/recharge_reward',
						url: '/pages/user/lsPh/lsPh',
						title: '流水排行',
						remark: '流水拿奖励',

					},
					//{
					// id: 3,
					// image: 'https://www.dingxians.cn/upload/user_static/user/app-item-2.png',
					// url: '',
					//  title: '绑定有礼',
					//  remark: '输入邀请码',
					// },
					{
						id: 4,
						image: 'https://www.dingxians.cn/upload/20250423/6808a0428222e.png',
						url: '/packageA/packet/index',
						title: 'Tiger红包',
						remark: '领取在线红包',
					},
					/*{
					         id: 4,
					         image: 'https://www.dingxians.cn/images/user/app-item-3.png',
					         url: '/pages/user/order',
					         title: '开盒记录',
					         remark: '查看抽奖记录',
					       },*/
				],
				top: 80,
				height: 0,
				popStatus: false,
				codeParams: {
					code: '',
				},
				token: uni.getStorageSync('token'),
				version_no: '',
				showVersion: false,
				percentVal: 0,
				versionData: {},
				mask: true,
				downStatus: false,
				orderCountData: {},
				loginSta: false
			}
		},
		//下拉刷新
		// onPullDownRefresh() {
		//   this.token = uni.getStorageSync('token')
		//   if (this.token) {
		//     this.getUser()
		//     this.getOrderCount()
		//   }
		//   setTimeout(function() {
		//     uni.stopPullDownRefresh()
		//   }, 1000)
		// },
		onLoad() {
			const {
				safeArea
			} = uni.getSystemInfoSync()
			this.top = safeArea.top
		},
		onShow() {
			this.getUser()
			this.token = uni.getStorageSync('token')
			if (this.token) {
				// this.getUser()
				this.getOrderCount()
			} else {
				this.userData.balance = 0
				this.userData.point = 0
				this.userData.coupon_count = 0
				this.userData.back_card_count = 0
				this.orderData = [{
						id: 1,
						image: 'https://www.dingxians.cn/images/user/order-item-1.png',
						url: '/pages/order/index?status=1',
						title: '待付款',
						num: 0,
					},
					{
						id: 2,
						image: 'https://www.dingxians.cn/images/user/order-item-2.png',
						url: '/pages/order/index?status=2',
						title: '待发货',
						num: 0,
					},
					{
						id: 3,
						image: 'https://www.dingxians.cn/images/user/order-item-3.png',
						url: '/pages/order/index?status=3',
						title: '待收货',
						num: 0,
					},
					{
						id: 4,
						image: 'https://www.dingxians.cn/images/user/order-item-4.png',
						url: '/pages/order/index?status=4',
						title: '已完成',
						num: 0,
					},
				]
			}
			// this.userData.nickname = uni.getStorageSync('nickname')
			// this.userData.avatar = uni.getStorageSync('avatar')
			// this.userData.id = uni.getStorageSync('user_id')

			this.percentVal = 0
			this.showVersion = false
			this.mask = true
			this.downStatus = false
			if (uni.getStorageSync('update_app')) {
				this.getVersion()
			}
		},

		methods: {
			cancel() {
				/*this.$refs.popup.close*/
				this.popStatus = false
			},
			go_url(item, type, login) {
				if (item.id != 7) {
					this.header(item.url, type, login)
				} else {
					api.users.settings()
						.then((res) => {
							this.$refs.kefuDialog.show()
							this.kferm = res.data.customer
							console.log('客服')
						})

				}
			},
			getOrderCount() {
				api.orders
					.count()
					.then((res) => {
						if (res.code === 200) {
							this.orderCountData = res.data
							this.orderData[0].num = this.orderCountData.order_count_1
							this.orderData[1].num = this.orderCountData.order_count_2
							this.orderData[2].num = this.orderCountData.order_count_3
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			bind() {
				if (this.userData.is_bind) return
				if (!this.codeParams.code) {
					this.show('请输入口令码')
					return
				}
				api.users
					.bind(this.codeParams)
					.then((res) => {
						if (res.code === 200) {
							this.show('绑定成功')
							// this.userData.is_bind = true
							this.getUser()
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			skip(item) {
				if (item.id != 3) {
					this.header(item.url, 1, true)
					return
				}

				if (!this.token) {
					this.header(`/pages/user/wxlogin`)
					return
				}
				/* this.popStatus = true
				this.$refs.popup.open('center') */
				this.$refs.alertDialog.show()
			},
			copyId(id) {
				uni.setClipboardData({
					data: id.toString(),
					success: () => {
						this.show('id已复制')
					},
					fail: () => {},
				})
			},
			getUser() {
				// uni.showLoading({
				//   title: '数据加载中',
				// })
				this.userData.balance = '0.00'
				this.userData.point = '0.00'
				api.users
					.show()
					.then((res) => {
						console.log(res,'res')
						if (res.code == 200) {
							this.loginSta = true
							// uni.hideLoading()
							this.userData = res.data
							// if (this.userData) {
							// uni.setStorageSync('nickname', this.userData.nickname)
							// uni.setStorageSync('avatar', this.userData.avatar)
							// uni.setStorageSync('user_id', this.userData.id)
							// }
						} else if (res.code == 403) {
							
							this.loginSta = false
						}
						console.log(this.loginSta,'loginsta')
					})
					.catch((error) => {
						uni.removeStorageSync('token')
						console.log(error)
					})
			},
			checkVersion() {
				let ua = uni.getSystemInfoSync().platform
				if (/ios/i.test(ua)) {
					this.type = 'ios'
				} else if (/android/i.test(ua)) {
					this.type = 'android'
				}
				uni.showLoading({
					title: '检查更新中',
				})
				api.versions
					.check({
						refresh: 1,
						type: this.type,
						version_no: this.version_no
					})
					.then((res) => {
						uni.hideLoading()
						if (res.code === 200) {
							this.versionData = res.data
							if (res.data.status == 0) {
								uni.setStorageSync('update_app', 0)
							} else {
								this.showVersion = true
								this.$refs.update_app.open('center')
								uni.setStorageSync('update_app', 1)
							}
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			getVersion() {
				plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
					this.version_no = wgtinfo.version
					this.checkVersion()
				})
			},
			updateApp() {
				this.downStatus = true
				this.mask = false
				if (this.type == 'android') {
					this.androidUpdate()
				} else if (this.type == 'ios') {
					this.iosUpdate()
				}
			},
			androidUpdate() {
				let file_size = this.versionData.file_size

				var dtask = plus.downloader.createDownload(this.versionData.url, {}, function(d, status) {
					// 下载完成
					if (status == 200) {
						plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, function(
							error) {
							this.show('安装成功')
						})
					} else {
						this.show('安装失败')
					}
				})
				dtask.start()

				let timer = setInterval(() => {
					let percent = (dtask.downloadedSize / file_size).toFixed(2) // fileSize文件总大小，后端返回的
					this.percentVal = Math.floor(percent * 100) // 转成整数展示
					if (percent >= 1) {
						// 注意百分比，及时清除定时器即可
						clearInterval(timer)
						this.showVersion = false
						this.$refs.pop.close()
					}
				}, 18)
			},
			iosUpdate() {
				plus.runtime.launchApplication({
						action: `${this.versionData.url}`,
					},
					function(e) {
						console.log('Open system default browser failed: ' + e.message)
					},
				)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.user-layout {
		background: url('https://kimi.dingxians.cn/upload/20250211/67aafe12bc5f0.png');
		background-size: 100% 100%;
		/*height: 100vh;*/
		height: 100vh;
		overflow-y: scroll;
	}

	.content {
		// d6c8fa
		// background: linear-gradient(to bottom, #CFBAF2, #f7f7f7);

		.bg {
			position: absolute;
			z-index: -10;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.top {
			display: flex;
			justify-content: flex-end;
			margin: 0 30rpx;
			align-items: center;
			/* #ifdef MP-WEIXIN */
			justify-content: flex-start;
			margin-left: 0;
			/* #endif */

			.top_item {
				margin-left: 50rpx;
				position: relative;
				z-index: 2;
				display: flex;

				.top_item_num {
					position: absolute;
					background-color: red;
					width: 28rpx;
					height: 28rpx;
					line-height: 48rpx;
					border-radius: 50%;
					top: -10rpx;
					right: -10rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 3;
					font-size: 24rpx;
				}

				.top_item_icon {
					width: 45rpx;
					height: 45rpx;
				}
			}
		}

		.header {
			margin: 10rpx 30rpx 10rpx 30rpx;
			// background-color: #fff;
			display: flex;
			flex-direction: column;
			border-radius: 10rpx;
			color: white;

			.user_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-left: 20rpx;
				margin-top: 30rpx;

				.user_box_left {
					display: flex;
					align-items: center;

					.avatar-box {
						width: 145rpx;
						height: 145rpx;
						background: url('https://www.dingxians.cn/upload/user_static/common/icon-border.png');
						background-size: 100% 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 20rpx;
					}

					.user_avatar {
						width: 108rpx;
						height: 108rpx;
						border-radius: 50%;
					}

					.user_info {
						display: flex;
						flex-direction: column;
						height: 100rpx;
						justify-content: space-around;

						.username {
							font-weight: bold;
							font-size: 36rpx;
						}

						.user_id {
							font-size: 24rpx;
							display: flex;
							align-items: center;
							color: #808080;

							.edit_image {
								width: 16rpx;
								height: 16rpx;
								margin-left: 10rpx;
							}
						}
					}
				}

				.user_box_right {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.balance_box {
				display: flex;
				// background-color: #fff;
				// margin: 0 30rpx;
				height: 180rpx;
				align-items: center;
				// border-radius: 10rpx;
				justify-content: space-between;

				.balance_item {
					display: flex;
					flex: 1;
					justify-content: center;
					align-items: center;
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.balance_text {
						color: #808080;
						font-size: 24rpx;
					}

					.balance_value {
						font-size: 40rpx;
						font-weight: bold;
					}
				}
			}
		}

		.vip_box {
			display: flex;
			position: relative;
			flex-direction: column;
			margin: 0 auto 0 auto;
			overflow: hidden;
			box-sizing: border-box;
			padding: 0 48rpx;
			height: 220rpx;
			width: 695rpx;
			z-index: 5;
			justify-content: center;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
			background: url('https://www.dingxians.cn/upload/user_static/user/vip-bg.png');
			background-size: 100% 100%;

			.vip_top {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				/* margin: 0 48rpx; */

				.vip_level {
					width: 115rpx;
					height: 46rpx;
					color: #663409;
					font-size: 26rpx;
					padding-top: 2rpx;
					vertical-align: middle;
					box-sizing: border-box;
					background: url('https://www.dingxians.cn/upload/user_static/user/vip-level.png');
					background-size: 100% 100%;
					padding-left: 50rpx;
					font-weight: bold;
				}

				.vip_btn {
					background: url('https://www.dingxians.cn/upload/user_static/user/vip-center.png');
					background-size: 100% 100%;
					width: 186rpx;
					height: 52rpx;
				}
			}

			.vip_middle {
				margin: 10rpx 0;
			}

			.vip_bottom {
				display: flex;
				justify-content: space-between;
				color: #938e54;
				margin-top: 10rpx;
				/* margin: 0 30rpx; */
				font-size: 22rpx;

				.grow-value {
					color: #ded000;
				}
			}

			.vip_bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 150rpx;
				z-index: -1;
			}
		}

		.order_box {
			display: flex;
			margin: 32rpx 30rpx 0;
			/* width: 698rpx; */
			height: 208rpx;
			background: url('https://www.dingxians.cn/upload/user_static/user/order-bg.png');
			background-size: 100% 100%;
			// border-bottom-left-radius: 20rpx;
			// border-bottom-right-radius: 20rpx;
			flex-direction: column;

			.order_header {
				/* display: flex;
      justify-content: space-between; */
				margin: 7rpx 0 35rpx;
				font-size: 30rpx;

				.order_header_left {
					font-weight: bold;
				}

				.order_header_right {
					display: flex;
					justify-content: flex-end;
					color: white;
					font-size: 24rpx;
					align-items: center;

					.right {
						width: 22rpx;
						height: 22rpx;
					}
				}
			}

			.order_list {
				display: flex;
				justify-content: space-between;
				color: white;
				margin: 0 69rpx 20rpx 69rpx;

				.order_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;

					.order_icon {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 5rpx;
					}

					.order_title {
						font-size: 24rpx;
					}

					.order_num {
						position: absolute;
						top: -16rpx;
						right: -20rpx;
						font-size: 24rpx;
						background-color: red;
						width: 30rpx;
						text-align: center;
						height: 30rpx;
						line-height: 30rpx;
						color: #fff;
						border-radius: 50%;
					}
				}
			}
		}

		.app_box {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			margin: 20rpx 30rpx 20rpx 30rpx;
			// margin-bottom: 10rpx;
			background: url('https://www.dingxians.cn/upload/user_static/user/card-bg.png');
			background-size: 100% 100%;
			/* .app_header {
      margin: 20rpx 30rpx 0 30rpx;
      font-size: 30rpx;
      font-weight: bold;
    } */
			display: flex;
			align-items: center;

			.app_content {
				width: 100%;
				display: flex;
				margin: 0 10rpx 30rpx 10rpx;
				flex-wrap: wrap;

				.app_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 22rpx;
					width: 25%;
					margin-top: 30rpx;
					color: white;

					.app_icon {
						margin-bottom: 20rpx;
						width: 34rpx;
						height: 46rpx;
					}
				}
			}
		}

		.apps {
			display: flex;
			margin: 32rpx 30rpx 0 30rpx;
			padding-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-evenly;
			background: url('https://www.dingxians.cn/upload/user_static/user/card-bg.png');
			background-size: 100% 100%;

			.apps_item {
				display: flex;
				align-items: center;
				justify-content: center;
				/* width: 49%;
      height: 170rpx; */

				margin-bottom: 20rpx;
				/* &:nth-child(1) {
        background-color: #f7eac8;
      }
      &:nth-child(2) {
        background-color: #f8f2c9;
      }
      &:nth-child(3) {
        background-color: #f6e0de;
      }
      &:nth-child(4) {
        background-color: #e2e0f2;
      } */

				.apps_title_box {
					display: flex;
					flex-direction: column;

					// border: 1rpx solid red;
					.apps_title {
						font-size: 36rpx;
						font-weight: bold;
						margin-bottom: 20rpx;
					}

					.apps_remark {
						color: #616161;
						font-size: 26rpx;
					}
				}

				.apps_icon {
					width: 320rpx;
					height: 126rpx;
				}
			}
		}

		.pop_box {
			display: flex;
			flex-direction: column;
			width: 600rpx;
			border-radius: 10rpx;

			.pop_header {
				margin: 20rpx auto 0 auto;
			}

			.pop_tip {
				font-size: 28rpx;
				text-align: center;
				color: white;
				margin-top: 20rpx;
			}

			.pop_user_box {
				display: flex;
				margin: 30rpx auto;
				width: 550rpx;
				justify-content: center;

				.pop_user_avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.pop_user {
					display: flex;
					flex-direction: column;
				}
			}

			.pop_code {
				text-align: left;
				background-color: #141414;
				border-radius: 10rpx;
				box-sizing: border-box;
				height: 76rpx;
				line-height: 76rpx;
				width: 540rpx;
				margin: 20rpx auto 45rpx;
				padding: 0 20rpx;
			}

			.give_btn_group {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 30rpx 30rpx 30rpx;

				.give_btn {
					width: 160rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					border-radius: 10rpx;
					font-size: 30rpx;

					&.give_cancel {
						background-color: #e7e7e7;
					}

					&.give_confirm {
						background-color: #a361f6;
						color: #fff;
					}
				}
			}
		}

		.app_popup {
			.app_pop_box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// background-color: #fff;
				width: 600rpx;
				height: 600rpx;
				border-radius: 10rpx;
				// padding: 20rpx 0;
				position: relative;

				.pop_bg {
					width: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: -1;
				}

				.pop_version {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-top: 100rpx;
					margin-left: 60rpx;

					.pop_header {
						color: #fff;
					}

					.pop_content {
						// padding: 0 20rpx;
						margin-top: 120rpx;
					}
				}

				.rate {
					width: 550rpx;
					margin: 0 auto;
					align-items: center;
					display: flex;

					.rate_image {
						width: 500rpx;
						margin-right: 10rpx;
					}
				}

				.down_btn_group {
					display: flex;
					justify-content: space-around;
					align-items: center;

					.down_btn {
						width: 200rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 24rpx;
						border-radius: 10rpx;

						&.cancel {
							background-color: #ccc;
							color: #999;
						}

						&.down {
							background-color: #a361f6;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>